<template>
    <div class="invoice-request">
        <el-page-header @back="goBack" content="索取发票"></el-page-header>
        <div class="steps">
            <el-steps :active="active">
                <el-step title="" icon="non-icon" description=""></el-step>
                <el-step title="" icon="el-icon-edit" description="1.选择开票订单"></el-step>
                <el-step title="" icon="el-icon-circle-check" description="2.确定发票信息和地址"></el-step>
            </el-steps>
        </div>

        <div v-if="active==2">
            <div class="show-info">
                后付费月结算单的可开票金额为当月实际结算金额。<br>
                本月产生的后付费业务月结算单在下个月二号以后才可以索取发票。<br>
                发票基于订单、月结算单开具（单个订单、月结算单不可拆分开票）。<br>
                自2017.07.01起，申请普通发票需填写税号信息，否则将无法应税使用，请及时维护您的税号信息。<br>
                从2017年8月25日起，申请纸质增值税普通发票，如金额未满200元，快递费用到付需自行承担。
            </div>

            <div style="margin-top: 20px;font-size: 14px">
                <el-row>
                    <el-col :span="7">
                        <label>订单查询：</label>
                        <el-input style="width: 70%" placeholder="输入订单号进行查询" v-model="searchOrderId" type="number">
                            <el-button slot="append" icon="el-icon-search" style="background-color: white" @click="searchOrderListByparam()"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="8">
                        <label>可开票金额范围（元）：</label>
                        <el-input style="width: 100px" placeholder="最低价" v-model="searchminPrice" onkeyup="value=value.match(/\d+\.?\d{0,2}/,'')" @change="priceChange()"></el-input>
                        ——
                        <el-input style="width: 100px" placeholder="最高价" v-model="searchMaxPrice" onkeyup="value=value.match(/\d+\.?\d{0,2}/,'')" @change="priceChange()"></el-input>
                    </el-col>
                </el-row>
            </div>

            <!--            <div style="margin-top: 20px">-->
            <!--                <el-checkbox v-model="chosenAll">本页全选</el-checkbox>-->
            <!--            </div>-->
            <div class="show-count"><span class="red-font">{{multipleSelection.length}}</span>个订单，共计<span
                    class="red-font">{{invoiceInfo.invoicePrice}}</span>元
            </div>

            <div style="margin-top: 10px">
                <el-table :data="orderData" border style="width: 100%" ref="multipleTable" tooltip-effect="dark"
                          @selection-change="handleSelectionChange">
                    <el-table-column align="center" type="selection" width="55"></el-table-column>
                    <el-table-column align="center" prop="orderId" label="订单编号" width="180"></el-table-column>
                    <el-table-column align="center" label="类型" width="180">
                        <template slot-scope="scope">
                            {{scope.row.type==1?'个人':'企业'}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="商品名称">
                        <template slot-scope="scope">
                            {{scope.row.commodityName}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="realsumPrice" label="订单实付金额"></el-table-column>
                    <el-table-column align="center" prop="realsumPrice" label="可开票金额"></el-table-column>
                    <el-table-column align="center" prop="payTime" label="订单支付时间"></el-table-column>
                </el-table>
            </div>
            <div style="margin-top: 20px">
                <el-button type="primary" size="small" @click="nextStep()">下一步</el-button>
            </div>
        </div>

        <!--        确定发票信息和地址-->
        <div v-else style="margin-top: 40px">
            <div>
                <el-form ref="invoiceInfo" :model="invoiceInfo" label-width="120px">
                    <el-form-item label="发票类型：">
                        <el-radio-group v-model="invoiceInfo.invoiceType">
                            <el-radio label="增值税普通发票">增值税普通发票</el-radio>
                            <el-radio label="增值税专用发票">增值税专用发票</el-radio>
                            <el-radio label="组织（非企业）增值税普通发票">组织（非企业）增值税普通发票</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="抬头类型：" class="input-width">
                        <el-radio-group v-model="invoiceInfo.makeInvoice">
                            <el-radio :label="1">个人</el-radio>
                            <el-radio :label="2">企业</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="发票抬头：" class="input-width" v-if="invoiceInfo.makeInvoice==1">
                        <el-input v-model="invoiceInfo.invoiceTitle" placeholder="请输入发票抬头"></el-input>
                    </el-form-item>

                    <el-form-item label="公司名称：" v-if="invoiceInfo.makeInvoice!=1" class="input-width">
                        <el-input v-model="invoiceInfo.invoiceTitle" placeholder="请输入公司名称"></el-input>
                    </el-form-item>

                    <el-form-item label="公司税号：" class="input-width" v-if="invoiceInfo.makeInvoice!=1">
                        <el-input v-model="invoiceInfo.taxNum" placeholder="请输入公司对应的税号"></el-input>
                    </el-form-item>
                    <div v-if="invoiceInfo.makeInvoice!=1" class="unfold" @click="unfoldFlag=!unfoldFlag">
                        {{unfoldFlag?'展开显示非必填':'收起非必填'}}
                    </div>
                    <div v-if="!unfoldFlag&&invoiceInfo.makeInvoice!=1">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="地 址：">
                                    <el-input v-model="invoiceInfo.detileAddress" placeholder="请输入地址"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="开 户 行：">
                                    <el-input v-model="invoiceInfo.bankName" placeholder="开户行"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="电 话：">
                                    <el-input v-model="invoiceInfo.phone" placeholder="请输入电话"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="开户行账号：">
                                    <el-input v-model="invoiceInfo.bankNum" placeholder="请输入开户行账号"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>

                    <el-form-item label="备 注：" class="input-width">
                        <el-input v-model="invoiceInfo.remark" placeholder="请输入备注信息"></el-input>
                    </el-form-item>

                    <div class="show-info">
                        总金额<span style="color: red;margin: 0px 5px">{{invoiceInfo.invoicePrice}}</span>元
                        <span style="margin: 20px 20px">共<span style="color: red">{{multipleSelection.length}}</span>张,</span>
                        <el-button type="text" size="mini" @click="chosenOrdersVisible=true">查看详情<i
                                class="el-icon-arrow-right el-icon--right"></i>
                        </el-button>
                    </div>

                    <el-form-item label="收件地址：">
                        <div class="address">
                            <div>
                                <span>{{defaultAddr.recipients}}</span><span style="margin: 0px 20px">{{defaultAddr.phone}}</span><br>
                                <span style="color: #999999">{{defaultAddr.province}}{{defaultAddr.city}}{{defaultAddr.district}}{{defaultAddr.detileAddress}}</span>
                            </div>
                        </div>
                        <div style="color: #2196F3;cursor: pointer" @click="showMoreAddr=!showMoreAddr">{{showMoreAddr?'收起更多地址':'展开更多地址'}}</div>
                        <div v-if="showMoreAddr">
                            <div v-for="(item,index) in transmitAddrData" :key="index" :class="index>0?'address':''">
                                <div v-if="index>0">
                                    <span>{{item.recipients}}</span><span style="margin: 0px 20px">{{item.phone}}</span><br>
                                    <span style="color: #999999">{{item.province}}{{item.city}}{{item.district}}{{item.detileAddress}}</span>
                                </div>
                            </div>
                        </div>
                    </el-form-item>

                    <div>
                        <el-button type="primary" size="small" @click="comfirmInvoice()">提交</el-button>
                    </div>
                </el-form>

            </div>

        </div>

        <!--        dialog-->
        <!--        查看所选中的订单-->
        <el-dialog :visible.sync="chosenOrdersVisible" :modal="false">
            <el-table :data="multipleSelection" border style="width: 100%">
                <el-table-column align="center" prop="orderId" label="订单编号" width="180"></el-table-column>
                <!--                <el-table-column align="center" prop="type" label="类型" width="180"></el-table-column>-->
                <el-table-column align="center" label="商品名称">
                    <template slot-scope="scope">
                        {{scope.row.commodityName}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="realsumPrice" label="订单实付金额"></el-table-column>
                <el-table-column align="center" prop="realsumPrice" label="可开票金额"></el-table-column>
                <el-table-column align="center" prop="payTime" label="订单支付时间" width="250"></el-table-column>
            </el-table>
        </el-dialog>
    </div>


</template>

<script src="./invoice.request.js"></script>
<style lang="scss" src="./invoice.request.scss"></style>
